<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item :label="$t('会员信息')">
              <a-input
                :placeholder="$t('请输入会员手机号/卡号/姓名/证件号/邮箱')"
                v-model="queryParam.memberInfo"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="5" :lg="6" :md="7" :sm="24">
            <a-form-item :label="$t('会员类型')">
              <a-select v-model="queryParam.memberType">
                <a-select-option v-for="(item, index) in memberTypeList" :key="index" :value="item.value">
                  {{ item.title }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="10" :lg="5" :md="6" :sm="24">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">{{$t('查询')}}</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">{{$t('重置')}}</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? $t('收起') : $t('展开') }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a>
            </span>
          </a-col>
          <template v-if="toggleSearchStatus">
            <a-col :xl="4" :lg="5" :md="6" :sm="24">
              <a-form-item :label="$t('账户状态')">
                <a-select v-model="queryParam.state">
                  <a-select-option v-for="(item, index) in memberStateList" :key="index" :value="item.value">
                    {{ item.title }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xl="10" :lg="11" :md="12" :sm="24">
              <a-form-item :label="$t('注册时间')">
                <j-date
                  :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"
                  valueFormat="YYYY-MM-DD HH:mm:ss"
                  dateFormat="YYYY-MM-DD HH:mm:ss"
                  :placeholder="$t('请选择开始时间')"
                  class="query-group-cust"
                  v-model="queryParam.regTimeBeg"
                ></j-date>
                <span class="query-group-split-cust"></span>
                <j-date
                  :show-time="{ defaultValue: moment('23:59:59', 'HH:mm:ss') }"
                  valueFormat="YYYY-MM-DD HH:mm:ss"
                  dateFormat="YYYY-MM-DD HH:mm:ss"
                  :placeholder="$t('请选择结束时间')"
                  class="query-group-cust"
                  v-model="queryParam.regTimeEnd"
                ></j-date>
              </a-form-item>
            </a-col>
            <a-col :xl="4" :lg="5" :md="6" :sm="24">
              <a-form-item :label="$t('注册渠道')">
                <a-select v-model="queryParam.channel">
                  <a-select-option v-for="(item, index) in channelList" :key="index" :value="item.value">
                    {{ item.title }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xl="4" :lg="5" :md="6" :sm="24">
              <a-form-item :label="$t('账户来源')">
                <a-select v-model="queryParam.source">
                  <a-select-option v-for="(item, index) in memberSoure" :key="index" :value="item.value">
                    {{ item.title }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xl="4" :lg="5" :md="6" :sm="24">
              <a-form-item :label="$t('会员性别')">
                <a-select v-model="queryParam.sex">
                  <a-select-option v-for="(item, index) in sexList" :key="index" :value="item.value">
                    {{ item.title }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xl="8" :lg="9" :md="10" :sm="24">
              {{ $t('会员生日') }}:
              <a-select style="width: 90px; margin-left: 10px" v-model="beg_month">
                <a-select-option
                  v-for="(item, index) in monthList"
                  :key="index"
                  :value="item"
                  @click="changeMon(item, 1)"
                  >{{ item }}</a-select-option
                >
              </a-select>
              <a-select style="width: 90px; margin-right: 10px" v-model="beg_day">
                <a-select-option
                  v-for="(item, index) in begDayList"
                  :key="index"
                  :value="item"
                  @click="changeDay(item, 1)"
                  >{{ item }}</a-select-option
                > </a-select
              >~
              <a-select style="width: 90px; margin-left: 5px" v-model="end_month">
                <a-select-option
                  v-for="(item, index) in monthList"
                  :key="index"
                  :value="item"
                  @click="changeMon(item, 2)"
                  >{{ item }}</a-select-option
                >
              </a-select>
              <a-select style="width: 90px" v-model="end_day">
                <a-select-option
                  v-for="(item, index) in endDayList"
                  :key="index"
                  :value="item"
                  @click="changeDay(item, 2)"
                  >{{ item }}</a-select-option
                >
              </a-select>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item :label="$t('钱包类型')">
                <a-select style="width: 90px;" v-model="queryParam.accountType">
                  <a-select-option value="coin">{{ $t('代币') }}</a-select-option>
                  <a-select-option value="integral">{{ $t('积分') }}</a-select-option>
                  <a-select-option value="lottery">{{ $t('彩票') }}</a-select-option>
                  <a-select-option value="alottery">{{ $t('A票') }}</a-select-option>
                  <a-select-option value="points">{{ $t('A币') }}</a-select-option>
                </a-select>
                <a-input
                  style="width: 80px; margin-left: 6px; margin-right: 2px"
                  v-model="queryParam.accountTypeBeg"
                />~
                <a-input style="width: 80px;" v-model="queryParam.accountTypeEnd" />
              </a-form-item>
            </a-col>
            <a-col :xl="4" :lg="5" :md="6" :sm="24">
              <a-form-item :label="$t('顾客类型')">
                <a-select v-model="queryParam.type">
                  <a-select-option v-for="(item, index) in memberType" :key="index" :value="item.value">
                    {{ item.title }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xl="4" :lg="5" :md="6" :sm="24">
              <a-form-item :label="$t('彩票状态')">
                <j-dict-select-tag :placeholder="$t('请选择')" v-model="queryParam.lotteryState" dictCode="account_state"/>
              </a-form-item>
            </a-col>
            <a-col :xl="10" :lg="11" :md="12" :sm="24">
              <a-form-item :label="$t('最后消费时间')">
                <j-date
                  :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"
                  valueFormat="YYYY-MM-DD HH:mm:ss"
                  dateFormat="YYYY-MM-DD HH:mm:ss"
                  :placeholder="$t('请选择开始时间')"
                  class="query-group-cust"
                  v-model="queryParam.consumeTimeBeg"
                ></j-date>
                <span class="query-group-split-cust"></span>
                <j-date
                  :show-time="{ defaultValue: moment('23:59:59', 'HH:mm:ss') }"
                  valueFormat="YYYY-MM-DD HH:mm:ss"
                  dateFormat="YYYY-MM-DD HH:mm:ss"
                  :placeholder="$t('请选择结束时间')"
                  class="query-group-cust"
                  v-model="queryParam.consumeTimeEnd"
                ></j-date>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item>
                <a-checkbox v-model="queryParam.includeCancel">{{ $t('查看已注销会员') }}</a-checkbox>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24" v-if="!tenantid">
              <a-form-item :label="$t('门店')">
                <a-select v-model="queryParam.shopCode">
                  <a-select-option v-for="(item, i) in shops" :key="i" :value="item.value"
                    >{{ item.title }}<span v-if="item.value != ''">（{{ item.value }}）</span></a-select-option
                  >
                </a-select>
              </a-form-item>
            </a-col>
          </template>
        </a-row>
      </a-form>
    </div>
    <div class="table-operator">
      <a-button type="primary" v-has="'MemberInfoList:summary'"
        @click="accountShow">{{ $t('账户汇总') }}</a-button>
      <a-button type="primary" v-has="'MemberInfoList:add'"
        @click="collectionShow()">{{ $t('补录') }}</a-button>
      <a-button type="primary" :loading="exloading" v-has="'MemberInfoList:export'"
        @click="handleExportXls($t('会员信息'))">{{ $t('导出') }}</a-button>
      <a-button type="primary" v-has="'MemberInfoList:templateImport'"
        @click="getImport">{{
          $t('模板导入')
        }}</a-button>
      <a-upload name="file" :showUploadList="false" :multiple="false"
        :headers="tokenHeader" :action="yjImportExcelUrl" @change="handleImportExcel">
        <a-button type="primary" v-has="'MemberInfoList:yingaImport'">{{ $t('盈加导入') }}</a-button>
      </a-upload>
      <a-popconfirm placement="topRight" :visible="visible0" @cancel="visible0 = false"
        :title="$t('您确定要对已经选择的会员进行注销吗？')" 
        @confirm="() => batchLogout()">
        <a-button type="primary" v-has="'MemberInfoList:batchLogout'" @click="handleClick">{{ $t('批量注销') }}</a-button>
      </a-popconfirm>
      <a-popover :title="$t('自定义列')" trigger="click" placement="leftBottom">
        <template slot="content">
          <a-checkbox-group @change="onColSettingsChange" v-model="settingColumns"
            :defaultValue="settingColumns">
            <a-row style="width: 400px">
              <template v-for="(item, i) in defColumns">
                <template v-if="item.key != 'rowIndex' && item.dataIndex != 'action'">
                  <a-col :span="12" :key="i">
                    <a-checkbox :value="item.dataIndex">
                      <j-ellipsis :value="item.title" :length="10"></j-ellipsis>
                    </a-checkbox>
                  </a-col>
                </template>
              </template>
            </a-row>
          </a-checkbox-group>
        </template>
        <a-button type="setting">{{ $t('设置显示项') }}</a-button>
      </a-popover>
    </div>
    <!-- 查询区域-END -->

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
        <i class="anticon anticon-info-circle ant-alert-icon"></i>
        <i18n path="selected-items" tag="span">
          <a place="items" style="font-weight: 600">{{ selectedRowKeys.length }}</a>
        </i18n>
        <a style="margin-left: 24px" @click="onClearSelected">{{ $t('清空') }}</a>
      </div>
      <a-table
        ref="table"
        size="middle"
        :scroll="{ x: true, y: tableHeight }"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        class="j-table-force-nowrap"
        @change="handleTableChange"
      >
        <span slot="action" slot-scope="text, record">
          <a @click="handleDetail(record)">{{ $t('详情') }}</a>
          <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link">{{ $t('更多') }}<a-icon type="down" /></a>
            <a-menu slot="overlay">
              <a-menu-item v-has="'MemberInfoList:resetPwd'" v-show="record.memberAccount.state == 0">
                <a @click="resetPassword(record)">{{
                  $t('重置密码')
                }}</a>
              </a-menu-item>
              <a-menu-item v-has="'MemberInfoList:amend'" v-show="record.memberAccount.state == 0">
                <a @click="editAccount(record)">{{
                  $t('账户修正')
                }}</a>
              </a-menu-item>
              <a-menu-item v-has="'MemberInfoList:lose'" v-show="record.memberAccount.state == 0">
                <a @click="handleLoss(record)">{{
                  $t('挂失')
                }}</a>
              </a-menu-item>
              <a-menu-item v-has="'MemberInfoList:cancelLose'" v-show="record.memberAccount.state == 1">
                <a-popconfirm
                  placement="topRight"
                  :title="$t('您确定要对该账户取消挂失吗？')"
                  @confirm="() => reportLoss(record.id)"
                >
                  <a>{{ $t('取消挂失') }}</a>
                </a-popconfirm>
              </a-menu-item>
              <a-menu-item v-has="'MemberInfoList:cancel'" v-show="record.memberAccount.state == 0 || record.type == 1 || record.memberAccount.state == 1">
                <a-popconfirm
                  placement="topRight"
                  :title="$t('cancel-member',{phone:record.phone,chipNo:record.chipNo,name:record.name})"
                  @confirm="() => handleTrans(record.id)"
                >
                  <a @click="handleCard(record)">{{ $t('注销') }}</a>
                </a-popconfirm>
              </a-menu-item>
              <a-menu-item v-has="'MemberInfoList:delete'" v-show="record.memberAccount.state == 2">
                <a-popconfirm
                  placement="topRight"
                  :title="$t('该操作将彻底从系统中清除此账户且不可恢复，您确定要删除吗？')"
                  @confirm="() => handleDelete(record.id)"
                >
                  <a>{{ $t('删除') }}</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
        <span slot="lotteryState" slot-scope="text, record">
          <a-tooltip v-if="record.lotteryState === 3" style="color: red;" :title="record.lotteryState_dictText"> 
            <span class="hover-text">{{ record.memberAccount ? parseFloat(record.memberAccount.lottery).toFixed(0) : '' }}</span>
          </a-tooltip>
          <span v-else class="hover-text">{{ record.memberAccount ? parseFloat(record.memberAccount.lottery).toFixed(0) : '' }}</span>
        </span>  
      </a-table>
    </div>

    <member-info-modal ref="modalForm" @ok="modalFormOk"></member-info-modal>
    <account-correction-modal ref="editModal" @ok="modalFormOk"></account-correction-modal>
    <reset-password-modal ref="resetModal"></reset-password-modal>
    <member-loss-modal ref="lossModal" @ok="lossOk"></member-loss-modal>
    <member-account-modal ref="accountModal"></member-account-modal>
    <member-collection-modal ref="collectionModal" @ok="modalFormOk"></member-collection-modal>
    <!-- 导入弹窗 -->
    <a-modal
      :title="$t('导入会员')"
      :visible="visible"
      :destroyOnClose="destroyOnClose"
      :confirm-loading="confirmLoading"
      :okText="$t('确定')"
      :cancelText="$t('取消')"
      :width="modal_width"
      :cancel-button-props="cancelbutton"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form-model ref="ruleForm" :model="ruleForm" :rules="rules" v-bind="layout">
        <a-form-model-item :label="$t('导入模板')">
          <a-button type="primary" icon="download" @click="download($t('会员信息导入模板'))">{{
            $t('下载模板')
          }}</a-button>
        </a-form-model-item>
        <a-form-model-item :label="$t('导入文件')" prop="name">
          <a-input-group compact>
            <a-input
              style="width: 80%"
              v-model="ruleForm.name"
              :placeholder="$t('请选择要导入的会员信息文件')"
              disabled
            ></a-input>
            <a-upload
              name="file"
              :showUploadList="false"
              :action="importExcelUrl"
              :multiple="false"
              :headers="tokenHeader"
              @change="handleImportExcel1"
            >
              <a-button style="background-color: #f59a23; color: #ffffff">{{ $t('选择') }}</a-button>
            </a-upload>
          </a-input-group>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </a-card>
</template>

<script>
import moment from 'moment'
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { initDictOptions, filterMultiDictText } from '@/components/dict/JDictSelectUtil'
import { getAction, postAction, UploadFile } from '@/api/manage'
import Vue from 'vue'
import AccountCorrectionModal from './modules/AccountCorrectionModal'
import MemberInfoModal from './modules/MemberInfoModal'
import ResetPasswordModal from './modules/ResetPasswordModal'
import MemberLossModal from './modules/MemberLossModal'
import MemberAccountModal from './modules/MemberAccountModal'
import MemberCollectionModal from './modules/MemberCollectionModal'

export default {
  name: 'MemberInfoList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    MemberInfoModal,
    AccountCorrectionModal,
    ResetPasswordModal,
    MemberLossModal,
    MemberAccountModal,
    MemberCollectionModal,
  },
  data() {
    return {
      moment,
      description: '会员信息管理页面',
      tenantid: Vue.ls.get('TENANT_ID'),
      dictOptions: {
        memberType: [],
        memberStateList: [],
        memberSoure: [],
      },
      queryParam: {
        memberType: '',
        state: '',
        source: '',
        sex: '',
        channel: '',
        birthdayBeg: '',
        birthdayEnd: '',
        accountType: 'coin',
        type: '',
        shopCode: '',
        includeCancel: true,
      },
      isorter: {
        column: 'regTime',
        order: 'desc',
      },
      beg_month: this.$t('月'),
      beg_day: this.$t('日'),
      end_month: this.$t('月'),
      end_day: this.$t('日'),
      monthList: [],
      begDayList: [],
      endDayList: [],
      //列设置
      settingColumns: [],
      columns: [],
      ruleForm: {
        filename: '',
        name: '',
      },
      rules: {
        name: [{ required: true, message: this.$t('请选择导入文件'), trigger: 'blur' }],
      },
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 16 },
      },
      // 表头
      defColumns: [
        {
          title: this.$t('手机号'),
          align: 'center',
          dataIndex: 'phone',
          width: 100,
          customCell:function(t,r){
            return {
              style:{
                'white-space': 'pre-wrap',
                'word-break': 'break-all'
              }
            }
          },
        },
        {
          title: this.$t('邮箱'),
          align: 'center',
          dataIndex: 'email',
          width: 180,
          customCell:function(t,r){
            return {
              style:{
                'white-space': 'pre-wrap',
                'word-break': 'break-all'
              }
            }
          },
        },
        {
          title: this.$t('卡号'),
          align: 'center',
          dataIndex: 'memberCards',
          width: 100,
          customCell:function(t,r){
            return {
              style:{
                'white-space': 'pre-wrap',
                'word-break': 'break-all'
              }
            }
          },
          customRender: function (text, record) {
            if (text.length != 0) {
              return text
                .filter((a) => {
                  return a.state === '0'
                })
                .map((a) => {
                  return a.chipNo
                })
                .join(',')
            } else {
              return ''
            }
          },
        },
        {
          title: this.$t('姓名'),
          align: 'center',
          dataIndex: 'name',
          width: 140,
          customCell:function(t,r){
            return {
              style:{
                'white-space': 'pre-wrap',
                'word-break': 'break-all'
              }
            }
          },
        },
        {
          title: this.$t('会员类型'),
          align: 'center',
          dataIndex: 'memberAccount.memberType',
          width: 140,
          customCell:function(t,r){
            return {
              style:{
                'white-space': 'pre-wrap',
                'word-break': 'break-all'
              }
            }
          },
          customRender: (text) => (text ? filterMultiDictText(this.dictOptions['memberType'], text) : ''),
        },
        {
          title: this.$t('账户状态'),
          align: 'center',
          dataIndex: 'memberAccount.state_dictText',
          width: 120,
          customCell:function(t,r){
            return {
              style:{
                'white-space': 'pre-wrap',
                'word-break': 'break-all'
              }
            }
          },
        },
        {
          title: this.$t('代币'),
          align: 'right',
          dataIndex: 'realCoin',
          width: 140,
          customCell:function(t,r){
            return {
              style:{
                'white-space': 'pre-wrap',
                'word-break': 'break-all'
              }
            }
          },
          sorter: true,
          customRender: (text, r) => {
            return r.memberAccount
              ? (parseFloat(r.memberAccount.presentCoin) + parseFloat(r.memberAccount.realCoin)).toFixed(2)
              : ''
          },
        },
        {
          title: this.$t('积分'),
          align: 'right',
          dataIndex: 'integral',
          width: 140,
          customCell:function(t,r){
            return {
              style:{
                'white-space': 'pre-wrap',
                'word-break': 'break-all'
              }
            }
          },
          sorter: true,
          customRender: (text, r) => {
            return r.memberAccount ? parseFloat(r.memberAccount.integral).toFixed(0) : ''
          },
        },
        {
          title: this.$t('彩票'),
          align: 'right',
          dataIndex: 'lottery',
          width: 140,
          customCell:function(t,r){
            return {
              style:{
                'white-space': 'pre-wrap',
                'word-break': 'break-all'
              }
            }
          },
          sorter: true,
          // customRender: (text, r) => {
          //   return r.memberAccount ? parseFloat(r.memberAccount.lottery).toFixed(0) : ''
          // },
          scopedSlots: { customRender: 'lotteryState' },
        } ,
        {
          title: this.$t('A票'),
          align: 'right',
          dataIndex: 'alottery',
          width: 140,
          customCell:function(t,r){
            return {
              style:{
                'white-space': 'pre-wrap',
                'word-break': 'break-all'
              }
            }
          },
          sorter: true,
          customRender: (text, r) => {
            return r.memberAccount ? parseFloat(r.memberAccount.alottery).toFixed() : ''
          },
        },
        {
          title: this.$t('A币'),
          align: 'right',
          dataIndex: 'points',
          width: 140,
          customCell:function(t,r){
            return {
              style:{
                'white-space': 'pre-wrap',
                'word-break': 'break-all'
              }
            }
          },
          sorter: true,
          customRender: (text, r) => {
            return r.memberAccount ? parseFloat(r.memberAccount.points).toFixed(0) : ''
          },
        },
        {
          title: this.$t('生日'),
          align: 'center',
          dataIndex: 'birthday',
          width: 140,
          customCell:function(t,r){
            return {
              style:{
                'white-space': 'pre-wrap',
                'word-break': 'break-all'
              }
            }
          },
          customRender: function (text) {
            return !text ? '' : text.length > 10 ? text.substr(0, 10) : text
          },
        },
        {
          title: this.$t('证件类型'),
          align: 'center',
          dataIndex: 'certType_dictText',
          width: 100,
          customCell:function(t,r){
            return {
              style:{
                'white-space': 'pre-wrap',
                'word-break': 'break-all'
              }
            }
          },
        },
        {
          title: this.$t('证件号'),
          align: 'center',
          dataIndex: 'certno',
          width: 160,
          customCell:function(t,r){
            return {
              style:{
                'white-space': 'pre-wrap',
                'word-break': 'break-all'
              }
            }
          },
        },
        /* {
          title: this.$t('OpenID'),
          align: 'center',
          dataIndex: 'wxOpenid',
          width: 220,
          customCell:function(t,r){
            return {
              style:{
                'white-space': 'pre-wrap',
                'word-break': 'break-all'
              }
            }
          },
        }, */
        {
          title: this.$t('性别'),
          align: 'center',
          dataIndex: 'sex_dictText',
          width: 80,
          customCell:function(t,r){
            return {
              style:{
                'white-space': 'pre-wrap',
                'word-break': 'break-all'
              }
            }
          },
        },
        {
          title: this.$t('微信昵称'),
          align: 'center',
          dataIndex: 'wxNickName',
          width: 140,
          customCell:function(t,r){
            return {
              style:{
                'white-space': 'pre-wrap',
                'word-break': 'break-all'
              }
            }
          },
        },
        {
          title: this.$t('成长值'),
          align: 'right',
          dataIndex: 'growth',
          width: 140,
          customCell:function(t,r){
            return {
              style:{
                'white-space': 'pre-wrap',
                'word-break': 'break-all'
              }
            }
          },
          sorter: true,
          customRender: (text, r) => {
            return r.memberAccount ? parseFloat(r.memberAccount.growth).toFixed(0) : ''
          },
        },
        {
          title: this.$t('有效期至'),
          align: 'center',
          dataIndex: 'memberAccount',
          width: 160,
          customCell:function(t,r){
            return {
              style:{
                'white-space': 'pre-wrap',
                'word-break': 'break-all'
              }
            }
          },
          customRender: (t, r) => {
            if (!t) {
              return ''
            }
            return t.validityEnd || this.$t('不限期')
          },
        },
        {
          title: this.$t('账户来源'),
          align: 'center',
          dataIndex: 'memberAccount.source_dictText',
          width: 140,
          customCell:function(t,r){
            return {
              style:{
                'white-space': 'pre-wrap',
                'word-break': 'break-all'
              }
            }
          },
        },
        {
          title: this.$t('注册渠道'),
          align: 'center',
          dataIndex: 'channel_dictText',
          width: 140,
          customCell:function(t,r){
            return {
              style:{
                'white-space': 'pre-wrap',
                'word-break': 'break-all'
              }
            }
          },
        },
        {
          title: this.$t('注册时间'),
          align: 'center',
          dataIndex: 'regTime',
          width: 160,
          customCell:function(t,r){
            return {
              style:{
                'white-space': 'pre-wrap',
                'word-break': 'break-all'
              }
            }
          },
          sorter: true,
        },
        {
          title: this.$t('最后消费时间'),
          align: 'center',
          dataIndex: 'consumeTime',
          width: 160,
          customCell:function(t,r){
            return {
              style:{
                'white-space': 'pre-wrap',
                'word-break': 'break-all'
              }
            }
          },
        },
        {
          title: this.$t('备注'),
          align: 'center',
          dataIndex: 'commet',
          width: 160,
          customCell:function(t,r){
            return {
              style:{
                'white-space': 'pre-wrap',
                'word-break': 'break-all'
              }
            }
          },
        },
        {
          title: this.$t('操作'),
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          width: 150,
          customCell:function(t,r){
            return {
              style:{
                'white-space': 'pre-wrap',
                'word-break': 'break-all'
              }
            }
          },
          scopedSlots: { customRender: 'action' },
        },
      ],
      url: {
        list: '/member/bisMemberInfo/list',
        delete: '/member/bisMemberInfo/delete',
        exportXlsUrl: '/member/bisMemberInfo/exportXls',
        importExcelUrl: 'sys/common/upload',
        yjImportExcelUrl: 'member/bisMemberInfo/yjImportExcel',
      },
      memberTypeList: [], //会员类型
      sexList: [],
      channelList: [],
      memberSoure: [],
      memberType: [],
      memberStateList: [],
      shops: [],
      selectedRowKeys: [],
      selectionRows: [],
      batchList: [],
      // 导入弹窗
      visible: false,
      destroyOnClose: true,
      confirmLoading: false,
      cancelbutton: { props: { disabled: false } },
      modal_width: '700px',
      hideCond: 3,
      visible0: false,
    }
  },
  created() {
    if (!this.tenantid) {
      let dtl = {
          title: this.$t('门店编码'),
          align: 'center',
          sorter: true,
          dataIndex: 'shopCode',
          width: 100,
          customCell:function(t,r){
            return {
              style:{
                'white-space': 'pre-wrap',
                'word-break': 'break-all'
              }
            }
          },
        },
        dtl1 = {
          title: this.$t('门店名称'),
          align: 'center',
          sorter: true,
          dataIndex: 'shopCode_dictText',
          width: 150,
          customCell:function(t,r){
            return {
              style:{
                'white-space': 'pre-wrap',
                'word-break': 'break-all'
              }
            }
          },
        }
      this.defColumns.splice(this.defColumns.length - 1, 0, dtl)
      this.defColumns.splice(this.defColumns.length - 1, 0, dtl1)
    }
    this.initColumns()
    for (var i = 1; i <= 12; i++) {
      this.monthList.push(i)
    }
    for (var i = 1; i <= 31; i++) {
      this.begDayList.push(i)
      this.endDayList.push(i)
    }
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
    yjImportExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.yjImportExcelUrl}`
    },
  },
  methods: {
    handleClick(){
      if(this.batchList.length>0){
        this.visible0 = true;
      }else{
        this.$message.warning(this.$t('请选择要注销的会员'))
      }
    },
    initDictConfig() {
      let dictCode = 'bis_member_rule,name,id'
      getAction(`/sys/dict/getDictItems/${dictCode}`, {}).then((res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'memberType', res.result)
          this.memberTypeList = res.result
          this.memberTypeList.unshift({ title: this.$t('全部'), value: '' })
        }
      })
      initDictOptions('bis_member.sex').then((res) => {
        if (res.success) {
          this.sexList = res.result
          this.sexList.unshift({ title: this.$t('全部'), value: '' })
        }
      })
      initDictOptions('bis_device_info.type').then((res) => {
        if (res.success) {
          this.channelList = res.result
          this.channelList.unshift({ title: this.$t('全部'), value: '' })
        }
      })
      initDictOptions('bis_member_infor.source').then((res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'memberSoure', res.result)
          this.memberSoure = res.result
          this.memberSoure.unshift({ title: this.$t('全部'), value: '' })
        }
      })
      initDictOptions('bis_member.type').then((res) => {
        if (res.success) {
          this.memberType = res.result
          this.memberType.unshift({ title: this.$t('全部'), value: '' })
        }
      })
      initDictOptions('bis_member_info.state').then((res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'memberStateList', res.result)
          this.memberStateList = res.result
          this.memberStateList.unshift({ title: this.$t('全部'), value: '' })
        }
      })
      initDictOptions('bis_shop,name,code').then((res) => {
        if (res.success) {
          this.shops = res.result
          this.shops.unshift({ value: '', title: this.$t('全部') })
        }
      })
    },
    changeMon(month, state) {
      month = parseInt(month, 10)
      let year = new Date().getFullYear()
      var temp = new Date(year, month, 0)
      let n = +temp.getDate()
      let dataTimes = []
      for (var i = 1; i < n + 1; i++) {
        dataTimes.push(i)
      }
      if (state == 1) {
        this.begDayList = dataTimes
        this.beg_month = month
        if (this.beg_day == this.$t('日')) {
          this.beg_day = dataTimes[0]
        }
        if (month < 10) {
          if (this.beg_day < 10) {
            this.queryParam.birthdayBeg = '0' + this.beg_month + '-0' + this.beg_day
          } else {
            this.queryParam.birthdayBeg = '0' + this.beg_month + '-' + this.beg_day
          }
        } else {
          if (this.beg_day < 10) {
            this.queryParam.birthdayBeg = this.beg_month + '-0' + this.beg_day
          } else {
            this.queryParam.birthdayBeg = this.beg_month + '-' + this.beg_day
          }
        }
      } else {
        this.endDayList = dataTimes
        this.end_month = month
        if (this.end_day == this.$t('日')) {
          this.end_day = dataTimes[dataTimes.length - 1]
        }
        if (month < 10) {
          if (this.end_day < 10) {
            this.queryParam.birthdayEnd = '0' + this.end_month + '-0' + this.end_day
          } else {
            this.queryParam.birthdayEnd = '0' + this.end_month + '-' + this.end_day
          }
        } else {
          if (this.end_day < 10) {
            this.queryParam.birthdayEnd = this.end_month + '-0' + this.end_day
          } else {
            this.queryParam.birthdayEnd = this.end_month + '-' + this.end_day
          }
        }
      }
    },
    changeDay(day, state) {
      if (state == 1) {
        this.beg_day = day
        if (day < 10) {
          if (this.beg_month < 10) {
            this.queryParam.birthdayEnd = '0' + this.beg_month + '-0' + this.beg_day
          } else {
            this.queryParam.birthdayEnd = this.beg_month + '-0' + this.beg_day
          }
        } else {
          if (this.beg_month < 10) {
            this.queryParam.birthdayEnd = '0' + this.beg_month + '-' + this.beg_day
          } else {
            this.queryParam.birthdayEnd = this.beg_month + '-' + this.beg_day
          }
        }
      } else {
        this.end_day = day
        if (day < 10) {
          if (this.end_month < 10) {
            this.queryParam.birthdayEnd = '0' + this.end_month + '-0' + this.end_day
          } else {
            this.queryParam.birthdayEnd = this.end_month + '-0' + this.end_day
          }
        } else {
          if (this.end_month < 10) {
            this.queryParam.birthdayEnd = '0' + this.end_month + '-' + this.end_day
          } else {
            this.queryParam.birthdayEnd = this.end_month + '-' + this.end_day
          }
        }
      }
    },
    accountShow() {
      this.$refs.accountModal.edit(this.queryParam)
    },
    collectionShow() {
      this.$refs.collectionModal.edit()
    },
    editAccount(record) {
      this.$refs.editModal.edit(record)
    },
    resetPassword(record) {
      this.$refs.resetModal.edit(record)
    },
    handleLoss(record) {
      this.$refs.lossModal.edit(record)
    },
    lossOk() {
      this.loadData(1)
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectionRows = selectionRows
      this.batchList = []
      selectionRows.forEach((row) => {
        this.batchList.push(row.id)
      })
    },
    onClearSelected() {
      this.selectedRowKeys = []
      this.selectionRows = []
    },
    searchReset() {
      this.queryParam = {
        memberType: '',
        state: '',
        source: '',
        sex: '',
        channel: '',
        birthdayBeg: '',
        birthdayEnd: '',
        accountType: 'coin',
        type: '',
        shopCode: '',
        includeCancel: true,
      }
      this.beg_month = this.$t('月')
      this.beg_day = this.$t('日')
      this.end_month = this.$t('月')
      this.end_day = this.$t('日')
      this.searchQuery(1)
    },
    modalFormOk() {
      this.loadData(1)
    },
    handleCard(record) {
      let aa = ''
      aa = record.memberCards
        .map((a) => {
          return a.chipNo
        })
        .join(',')
      this.$set(record, 'chipNo', aa)
    },
    handleTrans(id) {
      let query = {
        memberInfo: { id: id },
        order: { typeId: 15 },
      }
      postAction('/trans/trans', query).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.loadData(1)
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    batchLogout() {
      if (this.batchList.length > 0) {
        const ids = this.batchList.join(',')
        let query = {
          memberInfo: { id: ids },
          order: { typeId: 100 },
        }
        postAction('/trans/trans', query).then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.loadData(1)
          } else {
            this.$message.warning(res.message)
          }
          this.onClearSelected()
          this.batchList = []
          this.visible0 = false
        })
      }
    },
    reportLoss(id) {
      let param = {
          memberId: id
        }
      getAction(`/member/bisMemberInfo/reportLoss`, param).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.loadData(1)
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    initColumns() {
      //权限过滤（列权限控制时打开，修改第二个参数为授权码前缀）
      //this.defColumns = colAuthFilter(this.defColumns,'testdemo:');
      var key = this.$route.name + ':colsettings'
      let colSettings = Vue.ls.get(key)
      let str = plugin.getData('C:\\ProgramData\\leyudm\\Manage\\setColumn.json', key, colSettings)
      if (!colSettings) {
        colSettings = this.defColumns.map(c => {return c.dataIndex})
      }
      if (str) {
        colSettings = JSON.parse(str)
      }
      this.settingColumns = colSettings
      const cols = this.defColumns.filter((item) => {
        if (item.key == 'rowIndex' || item.dataIndex == 'action') {
          return true
        }
        if (colSettings.includes(item.dataIndex)) {
          return true
        }
        return false
      })
      this.columns = cols
    },
    //列设置更改事件
    onColSettingsChange(checkedValues) {
      var key = this.$route.name + ':colsettings'
      Vue.ls.set(key, checkedValues, 7 * 24 * 60 * 60 * 1000)
      plugin.setData('C:\\ProgramData\\leyudm\\Manage\\setColumn.json', key, JSON.stringify(checkedValues))
      localStorage.removeItem(key)
      this.settingColumns = checkedValues
      const cols = this.defColumns.filter((item) => {
        if (item.key == 'rowIndex' || item.dataIndex == 'action') {
          return true
        }
        if (this.settingColumns.includes(item.dataIndex)) {
          return true
        }
        return false
      })
      this.columns = cols
    },
    /**
     * 导入弹窗
     */
    getImport() {
      this.visible = true
      this.ruleForm = {
        filename: '',
        name: '',
      }
    },
    /**
     * 下载模板
     */
    download(fileName) {
      if (!fileName || typeof fileName != 'string') {
        fileName = this.$t('导出文件')
      }
      let url = window._CONFIG['domianURL'] + 'importTemplate/会员导入模板.xls'
      let link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.download = fileName
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link) //下载完成移除元素
      window.URL.revokeObjectURL(url) //释放掉blob对象
      return
    },
    /* 导入 */
    handleImportExcel1(info) {
      if (info.file.status !== 'uploading') {
        this.ruleForm.name = info.file.name
        this.ruleForm.filename = info.file.response.message
      }
      if (info.file.status === 'done') {
        if (info.file.response.success) {
          // this.$message.success(`${info.file.name} 文件上传成功`);
          if (info.file.response.code === 201) {
            let {
              message,
              result: { msg, fileUrl, fileName },
            } = info.file.response
            let href = window._CONFIG['domianURL'] + fileUrl
            // this.$warning({
            //   title: message,
            //   content: (
            //     <div>
            //       <span>{msg}</span><br/>
            //       <span>具体详情请 <a href={href} target="_blank" download={fileName}>点击下载</a> </span>
            //     </div>
            //   )
            // })
          } else {
            this.$message.success(info.file.response.message || `${info.file.name}` + this.$t('文件上传成功'))
          }
        } else {
          this.$message.error(`${info.file.name} ${info.file.response.message}.`)
        }
      } else if (info.file.status === 'error') {
        this.$message.error(this.$t('文件上传失败') + ': ' `${info.file.msg} `)
      }
    },
    /**
     * 弹窗确定
     */
    handleOk(e) {
      let that = this
      that.$refs.ruleForm.validate((valid) => {
        if (valid) {
          that.confirmLoading = true
          that.cancelbutton = { props: { disabled: true } }
          const params = {
            filename: that.ruleForm.filename,
          }
          UploadFile('/member/bisMemberInfo/importExcel', params).then((res) => {
            console.log(res)
            if (res.success) {
              setTimeout(() => {
                ;(that.cancelbutton = { props: { disabled: false } }), (that.confirmLoading = false)
                that.visible = false
                that.$message.success(res.message)
                that.loadData(1)
              }, 1000)
            } else {
              that.$message.error(res.message)
              setTimeout(() => {
                ;(that.cancelbutton = { props: { disabled: false } }), (that.confirmLoading = false)
              }, 1000)
            }
          })
        } else {
          that.$message.warning(this.$t('请检查输入项'))
          return false
        }
      })
    },
    /**
     * 弹窗取消
     */
    handleCancel(e) {
      this.visible = false
      this.$refs.ruleForm.resetFields()
    },
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>